<script setup>
import {ref, reactive} from 'vue'
import {Lock, User} from "@element-plus/icons-vue";
import {ElMessage} from 'element-plus'
import {loginAPI} from "@/apis/login/login";
// import {permissionAPI} from "@/apis/router/router";
import router from "@/router";
// import {useRouterStore} from "@/stores/router";

// const {setRouterData} = useRouterStore()

const formData = reactive({
  username: "admin",
  password: "123456"
})
// 表单校验规则

const rules = reactive({
  username: [{
    required: true,
    message: '请输入账号',
    trigger: 'blur'
  }],
  password: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }],
})

// 登录 获取form实例做统一校验
const form = ref(null)
const login = () => {
  // 调用实例方法
  form.value.validate(async (valid) => {
    if (valid) {
      console.log(formData)
      const res = await loginAPI(formData.username, formData.password)
      // 1. 提示用户
      if (res.data.code == 200) {
        // 将当前登录用户 存储在session中
        window.sessionStorage.setItem("user", JSON.stringify(res.data))
        /*encapsulateRouting()*/
        // setRouterData()
        // 3. 跳转首页
        router.replace({path: '/main'})
        ElMessage({type: 'success', message: '登录成功'})
      } else {
        ElMessage({type: 'error', message: res.message})
      }

    }
  })
}
// 添加动态路由

/*const encapsulateRouting = async () => {
  const {data: res} = await permissionAPI()
  res.data.filter(item => item.id !== 2 && item.id !== 19).forEach(item => {
    router.addRoute('main', {
      path: item.path, component: import("../../views" + item.url + ".vue")
    })
  })
  await router.replace(router.currentRoute.value.fullPath)
}*/

</script>

<template>
  <div class="content">
    <el-card>
      <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
        <el-col :span="19">
          <el-form-item label="账号：" prop="username">
            <el-input v-model="formData.username" placeholder="请输入账号" clearable
                      :style="{width: '100%'}">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <user/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label="密码：" prop="password">
            <el-input v-model="formData.password" placeholder="请输入密码" clearable
                      show-password :style="{width: '100%'}">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <lock/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="login">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100%;
}
.el-card {
  width: 40%;
  margin-left: 30%;
  margin-top: 300px;

  .el-form {
    padding: 50px;
  }
}
</style>
